<!DOCTYPE html>
	<head>
		<meta charset="utf-8" />
		<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
		<link rel="icon" type="image/png" href="../assets/img/favicon.png">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>
			文章阅读
		</title>
		<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
		<!--     Fonts and icons     -->
		<link href="../assets/css/fonts.css" rel="stylesheet" />
		<link rel="stylesheet" href="../assets/css/new_file.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
		<!-- CSS Files -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
		<link href="../assets/css/now-ui-kit.css?v=1.3.0" rel="stylesheet" />
		<!-- CSS Just for demo purpose, don't include it in your project -->
		<link href="../assets/demo/demo.css" rel="stylesheet" />
		<script src="../assets/js/axios-min.js"></script>
	<script src="../assets/js/vue.js"></script>
	<script src="../assets/js/vue-axios.js"></script>
	</head>

	<body class="login-page sidebar-collapse">
		<!-- Navbar -->
		<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent " color-on-scroll="400">
			<div class="container">
      <div class="navbar-translate">
      	<span></span>
        <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-bar top-bar"></span>
          <span class="navbar-toggler-bar middle-bar"></span>
          <span class="navbar-toggler-bar bottom-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="../assets/img/blurred-image-1.jpg">
        <ul class="navbar-nav">
          
		  <li class="nav-item">
		    <a class="nav-link" href="main.html" style="font-size: 18px;">个人主页</a>
		  </li>
		  <li class="nav-item">
		    <a class="nav-link" href="search.html" style="font-size: 18px;">文章搜索</a>
		  </li>
          <li class="nav-item">
            <a class="nav-link" href="login.html" style="font-size: 18px;">退出登录</a>
          </li>
        </ul>
      </div>
			</div>
		</nav>
		<!-- End Navbar -->
		<div class="wrapper">
    <div class="page-header clear-filter page-header-small" filter-color="orange">
      <div class="page-header-image" data-parallax="true" style="background-image:url(../assets/img/bg1.jpg);">
      </div>
      <h1 style="margin-top: 180px; margin-left: 8%; background-color: #ec720e; width: 230px;">作品欣赏</h1>
    </div>
    <div class="section" style="padding: 20px 0;">
      <div class="container" id="reading">
		  <h2 style="text-align: center;">{{passage.title}}</h2>
		  <span>{{passage.body}}</span>
    </div>
    
  </div>
		
		<!--   Core JS Files   -->
		<script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
		<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
		<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
		<!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
		<script src="../assets/js/plugins/bootstrap-switch.js"></script>
		<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
		<script src="../assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
		<!--  Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
		<script src="../assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
		<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
		<script src="../assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
		<script>
		new Vue({
			el: '#reading',
			data() {
				return {
					
					passage:'',
					
				}
			},
			mounted() {
				axios.get('/test/ReadServlet',{
			        params: {
					  passage: this.passage,

			        }
			      })
			      .then((response) => {
			        console.log(response.data);//请求的返回体
			        this.passage = response.data.passage;
			       
			      })
			      .catch((error) => {
			        console.log(error);//异常
			 });
			},
			methods: {
				submit() {
					
				
				},
				
			}

		})
	</script>
	</body>

</html>